import React from 'react'
import { Input, Button, List } from 'antd'
import 'antd/dist/antd.css'

export default class TodoListUI extends React.Component {
  render() {
    let { inputValue, list } = this.props
    return (
      <div style={{ width: '300px', margin: '0 auto' }}>
        <div style={{ display: 'flex' }}>
          <Input
            placeholder='Todo'
            value={inputValue}
            onChange={this.props.handleChangeInput}
            onKeyPress={this.props.handleKeyPress}
          />
          <Button
            type='primary'
            style={{ marginLeft: '10px' }}
            onClick={this.props.handleBtnClick}
          >
            提交
          </Button>
        </div>

        <List
          style={{ marginTop: '15px' }}
          bordered
          dataSource={list}
          renderItem={(item, index) => (
            <List.Item
              onClick={() => {
                this.props.handleItemDelete(index)
              }}
            >
              {item}
            </List.Item>
          )}
        />
      </div>
    )
  }
}
